இணைய செயல்திறனை வெளிக்கொணர்தல்: CSS கன்டெய்ன்மென்ட் பல-வகை உத்திகளில் தேர்ச்சி பெறுதல்

இன்றைய ஒன்றோடொன்று இணைக்கப்பட்ட டிஜிட்டல் உலகில், இணைய செயல்திறன் மிக முக்கியமானது. பயனர்கள் தங்கள் சாதனம், நெட்வொர்க் நிலைமைகள் அல்லது புவியியல் இருப்பிடத்தைப் பொருட்படுத்தாமல், மின்னல் வேக அனுபவங்களை எதிர்பார்க்கிறார்கள். ஒரு மந்தமான வலைத்தளம் பயனர்களை விரக்தியடையச் செய்வது மட்டுமல்லாமல், அது மாற்று விகிதங்கள், தேடுபொறி தரவரிசைகள் மற்றும் இறுதியில், உங்கள் உலகளாவிய அணுகலையும் பாதிக்கிறது. ஜாவாஸ்கிரிப்ட் மேம்படுத்தல்கள் பெரும்பாலும் கவனத்தை ஈர்க்கும் அதே வேளையில், ஒரு பக்கம் எவ்வளவு விரைவாகவும் மென்மையாகவும் ரெண்டர் ஆகிறது என்பதில் CSS சமமான முக்கியப் பங்காற்றுகிறது. செயல்திறனை அதிகரிப்பதற்கான மிகவும் சக்திவாய்ந்த ஆனால் பெரும்பாலும் குறைவாகப் பயன்படுத்தப்படும் CSS பண்புகளில் ஒன்று contain ஆகும்.

contain பண்பு, அதன் பல்வேறு வகைகள் மற்றும் அவற்றின் உத்திசார்ந்த கலவைகளுடன், உங்கள் UI-ன் சில பகுதிகள் தனிமைப்படுத்தப்பட்டவை என்பதை உலாவிக்குத் தெரிவிக்க ஒரு நுட்பமான வழிமுறையை வழங்குகிறது. CSS கன்டெய்ன்மென்ட் பல-வகை உத்திகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் உலாவியின் பணிச்சுமையை கணிசமாகக் குறைக்க முடியும், இது வேகமான ஆரம்ப பதிவேற்றங்கள், மென்மையான ஸ்க்ரோலிங் மற்றும் அதிக பதிலளிக்கக்கூடிய தொடர்புகளுக்கு வழிவகுக்கிறது. இந்த விரிவான வழிகாட்டி ஒவ்வொரு வகை கன்டெய்ன்மென்ட்டையும் ஆழமாக ஆராய்ந்து, அவற்றின் தனிப்பட்ட பலங்களை ஆராய்ந்து, மிக முக்கியமாக, அவற்றை இணைப்பது உங்கள் வலைப் பயன்பாடுகளுக்கு இணையற்ற மேம்படுத்தல் திறனை எவ்வாறு திறக்க முடியும் என்பதை நிரூபிக்கும், இது ஒரு பன்முக உலகளாவிய பார்வையாளர்களுக்கு ஏற்றது.

அமைதியான செயல்திறன் கொலையாளி: உலாவி ரெண்டரிங் செலவுகள்

நாம் contain இன் பிரத்தியேகங்களைப் பற்றி ஆராய்வதற்கு முன், அது தீர்க்கும் சவாலைப் புரிந்துகொள்வது அவசியம். ஒரு உலாவி ஒரு வலைப்பக்கத்தை ரெண்டர் செய்யும்போது, அது முக்கியமான ரெண்டரிங் பாதை எனப்படும் சிக்கலான தொடர் படிகள் வழியாகச் செல்கிறது. இந்தப் பாதையில் அடங்குபவை:

• லேஅவுட் (Reflow): பக்கத்தில் உள்ள அனைத்து கூறுகளின் அளவையும் நிலையையும் தீர்மானித்தல். Document Object Model (DOM) அல்லது CSS பண்புகளில் ஏற்படும் மாற்றங்கள் பெரும்பாலும் முழு ஆவணத்தின் அல்லது அதன் ஒரு குறிப்பிடத்தக்க பகுதியின் மறு-லேஅவுட்டைத் தூண்டுகின்றன.
• பெயிண்ட்: ஒவ்வொரு உறுப்பிற்கும் பிக்சல்களை நிரப்புதல் – உரை, வண்ணங்கள், படங்கள், பார்டர்கள் மற்றும் நிழல்களை வரைதல்.
• காம்போசிட்டிங்: பக்கத்தின் பகுதிகளை அடுக்குகளாக வரைந்து, பின்னர் இந்த அடுக்குகளைத் திரையில் தோன்றும் ஒரு இறுதிப் படமாக இணைத்தல்.

இந்த ஒவ்வொரு படியும் கணக்கீட்டு ரீதியாக செலவு மிக்கதாக இருக்கலாம். பல ஊடாடும் கூறுகளைக் கொண்ட ஒரு பெரிய, சிக்கலான வலைப்பக்கத்தை கற்பனை செய்து பாருங்கள். DOM-ன் ஒரு பகுதியில் ஒரு சிறிய மாற்றம், அதாவது ஒரு பட்டியலில் ஒரு புதிய உருப்படியைச் சேர்ப்பது அல்லது ஒரு உறுப்பை அனிமேட் செய்வது, முழு ஆவண மரத்திற்கும் லேஅவுட், பெயிண்ட் மற்றும் காம்போசிட்டிங்கின் முழுமையான மறு கணக்கீட்டைத் தூண்டக்கூடும். இந்த அலை விளைவு, பெரும்பாலும் கண்களுக்குத் தெரியாதது, குறிப்பாக உலகின் பல பகுதிகளில் பொதுவான குறைந்த சக்தி வாய்ந்த சாதனங்கள் அல்லது மெதுவான நெட்வொர்க் இணைப்புகளில், திணறல் மற்றும் மோசமான செயல்திறனுக்கான ஒரு முக்கிய காரணமாகும்.

contain பண்பு இந்த அலை விளைவை உடைக்க ஒரு வழியை வழங்குகிறது. இது ஒரு குறிப்பிட்ட உறுப்பு மற்றும் அதன் சந்ததியினர் பக்கத்தின் மற்ற பகுதிகளிலிருந்து பெரும்பாலும் சுயாதீனமானவை என்று உலாவிக்கு வெளிப்படையாகக் கூற டெவலப்பர்களுக்கு அனுமதிக்கிறது. இந்த "கன்டெய்ன்மென்ட்" உலாவிக்கு முக்கியமான குறிப்புகளை வழங்குகிறது, இது முழு பக்கத்தையும் ஸ்கேன் செய்வதற்குப் பதிலாக, DOM-ன் குறிப்பிட்ட துணை மரங்களுக்கு கணக்கீடுகளைக் கட்டுப்படுத்துவதன் மூலம் அதன் ரெண்டரிங் செயல்முறையை மேம்படுத்த உதவுகிறது. இது உங்கள் வலைப்பக்கத்தின் ஒரு குறிப்பிட்ட பகுதியைச் சுற்றி ஒரு வேலி போடுவது போன்றது, உலாவிக்கு, "இந்த வேலிக்குள் என்ன நடந்தாலும் அது இந்த வேலிக்குள்ளேயே இருக்கும்" என்று சொல்வது போல.

CSS contain பண்பை பிரித்தாய்தல்: தனிப்பட்ட கன்டெய்ன்மென்ட் வகைகள்

contain பண்பு பல மதிப்புகளை ஏற்றுக்கொள்கிறது, ஒவ்வொன்றும் வெவ்வேறு நிலை அல்லது வகை தனிமைப்படுத்தலை வழங்குகிறது. இந்த தனிப்பட்ட வகைகளைப் புரிந்துகொள்வது இணைந்த உத்திகளில் தேர்ச்சி பெறுவதற்கான அடித்தளமாகும்.

1. contain: layout;

layout மதிப்பு ஒரு உறுப்பின் உள் லேஅவுட், அந்த உறுப்புக்கு வெளியே உள்ள எதையும் பாதிப்பதைத் தடுக்கிறது. மறுபுறம், உறுப்புக்கு வெளியே உள்ள எதுவும் அதன் உள் லேஅவுட்டைப் பாதிக்காது. இதை லேஅவுட் கணக்கீடுகளுக்கான ஒரு வலுவான எல்லையாக நினைத்துப் பாருங்கள். contain: layout; உடன் உள்ள ஒரு உறுப்பு, அதன் உள் உள்ளடக்கம் அல்லது ஸ்டைல்களை மாற்றினால், அது சாதாரணமாக அதன் முன்னோர்கள் அல்லது உடன்பிறப்புகளின் மறு-ஓட்டத்தைத் தூண்டும், அந்த வெளிப்புற உறுப்புகள் பாதிக்கப்படாமல் இருக்கும்.

• நன்மைகள்: லேஅவுட் கணக்கீடுகளை கணிசமாக வேகப்படுத்துகிறது, ஏனெனில் உலாவிக்குத் தெரியும், அது முழுப் பக்கத்தையும் அல்ல, கன்டெய்ன் செய்யப்பட்ட உறுப்பு மற்றும் அதன் சந்ததியினரின் லேஅவுட்டை மட்டுமே மறு மதிப்பீடு செய்ய வேண்டும். இது அடிக்கடி அளவு அல்லது உள்ளடக்கத்தை மாற்றும் உறுப்புகளுக்கு குறிப்பாக தாக்கத்தை ஏற்படுத்துகிறது.
• எப்போது பயன்படுத்த வேண்டும்: விட்ஜெட்டுகள், கார்டு லேஅவுட்கள் அல்லது ஒரு விர்ச்சுவல் பட்டியலில் உள்ள உருப்படிகள் போன்ற சுயாதீனமான UI கூறுகளுக்கு ஏற்றது, அங்கு ஒவ்வொரு உருப்படியின் உள் மாற்றங்களும் உலகளாவிய மறு-லேஅவுட்டை ஏற்படுத்தக்கூடாது. உதாரணமாக, ஒரு இ-காமர்ஸ் பயன்பாட்டில், ஒரு தயாரிப்பு கார்டு கூறு, அதன் மாறும் உள்ளடக்கம் (ஒரு 'விற்பனை' பேட்ஜ் அல்லது புதுப்பிக்கப்பட்ட விலை போன்றவை) அதன் சுற்றியுள்ள தயாரிப்பு கட்டத்தின் மறு கணக்கீட்டை கட்டாயப்படுத்தாது என்பதை உறுதிப்படுத்த contain: layout; ஐப் பயன்படுத்தலாம்.
• எடுத்துக்காட்டு காட்சி: செய்திகளின் ஓட்டத்தைக் காட்டும் ஒரு அரட்டை பயன்பாடு. ஒவ்வொரு செய்தி குமிழியும் மாறும் உள்ளடக்கத்தைக் கொண்டிருக்கலாம் (படங்கள், ஈமோஜிகள், மாறுபட்ட உரை நீளம்). ஒவ்வொரு செய்தி உறுப்புக்கும் contain: layout; ஐப் பயன்படுத்துவது, ஒரு புதிய செய்தி வரும்போது அல்லது ஏற்கனவே உள்ள ஒன்று விரிவடையும் போது, அந்த குறிப்பிட்ட செய்தியின் லேஅவுட் மட்டுமே மறு கணக்கீடு செய்யப்படுவதை உறுதி செய்கிறது, முழு அரட்டை வரலாறு அல்ல.
• சாத்தியமான ஆபத்துகள்: உறுப்பின் அளவு அதன் உள்ளடக்கத்தைப் பொறுத்தது என்றால், நீங்கள் அதன் அளவையும் கன்டெய்ன் செய்யவில்லை என்றால், உறுப்பு அதன் இடத்தை பார்வைக்கு மீறுவது அல்லது அதன் ஆரம்ப லேஅவுட் தவறாக இருப்பது போன்ற எதிர்பாராத காட்சி குறைபாடுகளைப் பெறலாம். இது பெரும்பாலும் contain: size; உடன் இணைக்கப்பட வேண்டும்.

2. contain: paint;

paint மதிப்பு உலாவிக்குச் சொல்கிறது, உறுப்புக்குள் உள்ள எதுவும் அதன் எல்லைகளுக்கு வெளியே பெயிண்ட் செய்யப்படாது. இதன் பொருள், உலாவி உறுப்பின் பேடிங் பெட்டியைத் தாண்டி நீளும் எந்த உள்ளடக்கத்தையும் பாதுகாப்பாக கிளிப் செய்யலாம். மேலும் முக்கியமாக, கன்டெய்ன் செய்யப்பட்ட உறுப்பின் உள்ளடக்கம் அதன் முன்னோர்கள் அல்லது உடன்பிறப்புகளின் பெயிண்ட்டிங்கை பாதிக்காது என்று கருதி, உலாவி பெயிண்ட்டிங்கை மேம்படுத்த முடியும். உறுப்பு திரை-க்கு வெளியே இருக்கும்போது, உலாவி அதை பெயிண்ட் செய்வதை முற்றிலுமாகத் தவிர்க்கலாம்.

• நன்மைகள்: பெயிண்ட் செய்யும் பகுதியை வரம்பிடுவதன் மூலம் பெயிண்ட் நேரத்தைக் குறைக்கிறது. முக்கியமாக, இது திரை-க்கு வெளியே உள்ள உறுப்புகளை முன்கூட்டியே நீக்க உலாவியை அனுமதிக்கிறது. contain: paint; உடன் உள்ள ஒரு உறுப்பு வியூபோர்ட்டிலிருந்து வெளியேறினால், உலாவி அதன் எந்த உள்ளடக்கத்தையும் பெயிண்ட் செய்யத் தேவையில்லை என்பதை அறியும். இது ஸ்க்ரோல் செய்யக்கூடிய பகுதிகள் அல்லது டேப் செய்யப்பட்ட இடைமுகங்களுக்குள் உள்ள உறுப்புகளுக்கு ஒரு பெரிய வெற்றியாகும், அங்கு பல கூறுகள் DOM இல் இருக்கலாம் ஆனால் தற்போது தெரியவில்லை.
• எப்போது பயன்படுத்த வேண்டும்: அடிக்கடி பார்வைக்குள் மற்றும் வெளியே ஸ்க்ரோல் செய்யப்படும் உறுப்புகள், டேப் பேனல்களில் உள்ள உறுப்புகள் (செயலற்ற டேப்கள்) அல்லது திரை-க்கு வெளியே உள்ள வழிசெலுத்தல் மெனுக்களுக்கு ஏற்றது. பல விளக்கப்படங்கள் மற்றும் தரவுக் காட்சிப்படுத்தல்களைக் கொண்ட ஒரு சிக்கலான டாஷ்போர்டைக் கவனியுங்கள்; ஒவ்வொரு விட்ஜெட்டிற்கும் contain: paint; ஐப் பயன்படுத்துவது உலாவி அவற்றின் ரெண்டரிங்கை மேம்படுத்த அனுமதிக்கிறது, குறிப்பாக அவை தற்போதைய பார்வைக்கு வெளியே இருக்கும்போது.
• எடுத்துக்காட்டு காட்சி: பல ஸ்லைடுகளைக் கொண்ட ஒரு கொணர்வி கூறு. ஒரு நேரத்தில் ஒரு ஸ்லைடு மட்டுமே தெரியும். ஒவ்வொரு ஸ்லைடிற்கும் (செயலில் உள்ள ஒன்றைத் தவிர) contain: paint; ஐப் பயன்படுத்துவது, தெரியாத ஸ்லைடுகளை பெயிண்ட் செய்வதைத் தவிர்க்க உலாவியை அனுமதிக்கிறது, இது ரெண்டரிங் மேல்நிலையை கணிசமாகக் குறைக்கிறது.
• சாத்தியமான ஆபத்துகள்: உறுப்பின் காட்சி பெட்டியை மீறும் எந்த உள்ளடக்கமும் கிளிப் செய்யப்படும். இது சரியாக நிர்வகிக்கப்படாவிட்டால் விரும்பத்தகாத காட்சி துண்டிப்புக்கு வழிவகுக்கும். உங்கள் உறுப்புக்கு போதுமான இடம் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் அல்லது கன்டெய்ன் செய்யப்பட்ட உறுப்புக்குள் உள்ளடக்கம் ஸ்க்ரோல் செய்யப்பட வேண்டும் என நீங்கள் விரும்பினால் overflow: auto; ஐப் பயன்படுத்தவும்.

3. contain: size;

size மதிப்பு உலாவிக்கு உறுப்பின் அளவு அதன் உள்ளடக்கத்திலிருந்து சுயாதீனமானது என்று தெரிவிக்கிறது. உலாவி பின்னர் உறுப்பு ஒரு நிலையான அளவைக் கொண்டிருப்பதாகக் கருதும் (CSS width/height/min-height ஆல் வெளிப்படையாக வரையறுக்கப்பட்டது அல்லது ஒரு படமாக இருந்தால் அதன் உள்ளார்ந்த அளவு போன்றவை) மற்றும் அதன் குழந்தைகளை அடிப்படையாகக் கொண்டு அதன் அளவை மறு மதிப்பீடு செய்யத் தேவையில்லை. இது layout கன்டெய்ன்மென்ட் உடன் இணைக்கப்படும்போது நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது.

• நன்மைகள்: உறுப்பின் உள்ளடக்கத்தில் ஏற்படும் மாற்றங்களால் ஏற்படும் உலகளாவிய லேஅவுட் மாற்றங்களைத் தடுக்கிறது, இது இல்லையெனில் அதன் அளவைப் பாதிக்கும். இது பல உறுப்புகள் உங்களிடம் இருக்கும் சூழ்நிலைகளில் குறிப்பாக பயனுள்ளதாக இருக்கும், மேலும் உலாவி அவற்றின் குழந்தைகளை ஆய்வு செய்யாமல் அவற்றின் எல்லைப் பெட்டிகளை முன்கூட்டியே கணக்கிட முடியும். கன்டெய்ன் செய்யப்பட்ட உறுப்பின் உள்ளடக்கம் மாறும்போது முன்னோர்கள் மற்றும் உடன்பிறப்புகள் மறு-ஓட்டம் செய்யத் தேவையில்லை என்பதை இது உறுதி செய்கிறது.
• எப்போது பயன்படுத்த வேண்டும்: அவற்றின் பரிமாணங்களை நீங்கள் அறிந்த அல்லது அவை வெளிப்படையாக வரையறுக்கப்பட்ட கூறுகளுக்கு அவசியம். நிலையான அளவிலான படக் கேலரிகள், வீடியோ பிளேயர்கள் அல்லது ஒரு கட்டம் அமைப்பிற்குள் உள்ள கூறுகளைப் பற்றி சிந்தியுங்கள், அங்கு ஒவ்வொரு கட்டம் உருப்படிக்கும் ஒரு வரையறுக்கப்பட்ட பகுதி உள்ளது. உதாரணமாக, ஒரு சமூக ஊடக ஊட்டம், அங்கு ஒவ்வொரு இடுகைக்கும் கருத்துகள் அல்லது விருப்பங்களின் எண்ணிக்கையைப் பொருட்படுத்தாமல் ஒரு நிலையான உயரம் உள்ளது, contain: size; ஐப் பயன்படுத்தலாம்.
• எடுத்துக்காட்டு காட்சி: ஒரு இடம்பிடித்தல் படம் மற்றும் ஒரு நிலையான உரை பகுதி கொண்ட ஒவ்வொரு உருப்படியையும் கொண்ட ஒரு தயாரிப்பு உருப்படிகளின் பட்டியல். படம் மெதுவாக ஏற்றப்பட்டாலும் அல்லது உரை மாறும் வகையில் புதுப்பிக்கப்பட்டாலும், உலாவி ஒவ்வொரு உருப்படியின் அளவையும் நிலையானதாகக் கருதுகிறது, இது முழு பட்டியலுக்கும் லேஅவுட் மறு கணக்கீடுகளைத் தடுக்கிறது.
• சாத்தியமான ஆபத்துகள்: உள்ளடக்கம் உண்மையில் அதன் பெற்றோர் அளவைப் பாதிக்க வேண்டுமானால் அல்லது உறுப்பின் அளவு வெளிப்படையாக வரையறுக்கப்படவில்லை என்றால், contain: size; ஐப் பயன்படுத்துவது உள்ளடக்க வழிதல் அல்லது தவறான ரெண்டரிங்கிற்கு வழிவகுக்கும். உறுப்புக்கு ஒரு நிலையான, கணிக்கக்கூடிய அளவு இருப்பதை நீங்கள் உறுதி செய்ய வேண்டும்.

4. contain: style;

style மதிப்பு உறுப்பின் துணை மரத்திற்குள் உள்ள ஸ்டைல் மாற்றங்கள் அந்த துணை மரத்திற்கு வெளியே எதையும் பாதிப்பதைத் தடுக்கிறது. இது ஒரு குறிப்பிட்ட ஆனால் இன்னும் மதிப்புமிக்க கன்டெய்ன்மென்ட் வகையாகும், குறிப்பாக அதிக மாறும் பயன்பாடுகளில். இதன் பொருள் முன்னோடி ஸ்டைல்களைப் பாதிக்கக்கூடிய பண்புகள் (CSS கவுண்டர்கள் அல்லது குறிப்பிட்ட தனிப்பயன் பண்புகள் போன்றவை) கன்டெய்ன் செய்யப்பட்ட உறுப்பிலிருந்து தப்பிக்காது.

• நன்மைகள்: ஸ்டைல் மறு கணக்கீடுகளின் நோக்கத்தைக் குறைக்கிறது. style இலிருந்து மட்டும் ஒரு குறிப்பிடத்தக்க செயல்திறன் ஊக்கத்தைக் காண்பது குறைவாக இருந்தாலும், இது சிக்கலான CSS கட்டமைப்புகளில் ஒட்டுமொத்த நிலைத்தன்மை மற்றும் கணிக்கக்கூடிய தன்மைக்கு பங்களிக்கிறது. ஒரு கூறுக்குள் வரையறுக்கப்பட்ட தனிப்பயன் பண்புகள் போன்ற ஸ்டைல்கள் தற்செயலாக "கசிந்து" பக்கத்தின் தொடர்பில்லாத பகுதிகளைப் பாதிக்காது என்பதை இது உறுதி செய்கிறது.
• எப்போது பயன்படுத்த வேண்டும்: நீங்கள் ஒரு கூறுக்குள் தனிப்பயன் பண்புகள் (CSS மாறிகள்) அல்லது CSS கவுண்டர்கள் போன்ற சிக்கலான CSS அம்சங்களைப் பயன்படுத்தும் சூழ்நிலைகளில், அவற்றின் நோக்கம் கண்டிப்பாக உள்ளூர் என்பதை உறுதிப்படுத்த விரும்பும்போது. இது பல குழுக்களால் உருவாக்கப்பட்ட பெரிய பயன்பாடுகளுக்கு ஒரு நல்ல தற்காப்பு நடவடிக்கையாக இருக்கலாம்.
• எடுத்துக்காட்டு காட்சி: அதன் உள் தீமிங்கிற்காக CSS மாறிகளை பெரிதும் நம்பியிருக்கும் ஒரு வடிவமைப்பு அமைப்பு கூறு. இந்தக் கூறுக்கு contain: style; ஐப் பயன்படுத்துவது, இந்த உள் மாறிகள் பக்கத்தில் வேறு எங்கும் வரையறுக்கப்பட்ட மாறிகள் அல்லது ஸ்டைல்களுடன் தற்செயலாக குறுக்கிடாது என்பதை உறுதி செய்கிறது, இது மட்டுப்படுத்தலை ஊக்குவிக்கிறது மற்றும் எதிர்பாராத உலகளாவிய ஸ்டைல் மாற்றங்களைத் தடுக்கிறது.
• சாத்தியமான ஆபத்துகள்: இந்த மதிப்பு layout அல்லது size உடன் ஒப்பிடும்போது காட்சி சிக்கல்களை ஏற்படுத்துவது குறைவு, ஆனால் சில CSS பண்புகள் (எ.கா., முன்னோர்களுக்கு மறைமுகமாகப் பொருந்தும் அல்லது எதிர்பாராத வழிகளில் மரபுரிமையாகப் பெறப்பட்ட மதிப்புகளைப் பாதிப்பவை) கட்டுப்படுத்தப்படும் என்பதை அறிந்திருப்பது முக்கியம்.

5. ஷார்ட்ஹேண்ட் பண்புகள்: contain: strict; மற்றும் contain: content;

பல கன்டெய்ன்மென்ட் வகைகளைப் பயன்படுத்துவதை எளிதாக்க, CSS இரண்டு ஷார்ட்ஹேண்ட் மதிப்புகளை வழங்குகிறது:

contain: strict;

இது கன்டெய்ன்மென்ட்டின் மிகவும் ஆக்ரோஷமான வடிவமாகும், இது contain: layout paint size style; க்கு சமம். இது உறுப்பு அதன் லேஅவுட், பெயிண்ட், அளவு மற்றும் ஸ்டைல் ஆகியவற்றின் அடிப்படையில் முற்றிலும் தன்னிறைவு பெற்றது என்று உலாவிக்குச் சொல்கிறது. உலாவி அத்தகைய உறுப்பை ஒரு முற்றிலும் சுயாதீனமான அலகாகக் கருதலாம்.

• நன்மைகள்: அதிகபட்ச செயல்திறன் தனிமைப்படுத்தலை வழங்குகிறது. இது உண்மையாகவே தனித்து நிற்கும் மற்றும் அதன் ரெண்டரிங் வாழ்க்கைச் சுழற்சி ஆவணத்தின் மற்ற பகுதிகளிலிருந்து முற்றிலும் சுயாதீனமாக இருக்கும் உறுப்புகளுக்கு ஏற்றது.
• எப்போது பயன்படுத்த வேண்டும்: மிகுந்த எச்சரிக்கையுடன் பயன்படுத்தவும். பரிமாணங்கள் வெளிப்படையாக அறியப்பட்ட மற்றும் அதன் உள்ளடக்கம் ஒருபோதும் வழிந்து செல்லாது அல்லது பெற்றோர்/உடன்பிறப்பு உறுப்புகளின் லேஅவுட்/அளவைப் பாதிக்காது என்று இருக்கும் கூறுகளுக்கு மட்டுமே contain: strict; ஐப் பயன்படுத்தவும். எடுத்துக்காட்டுகளில் நிலையான அளவு பாப்-அப் மோடல்கள், வீடியோ பிளேயர்கள் அல்லது வெளிப்படையாக அளவு மற்றும் தன்னிறைவு கொண்ட விட்ஜெட்டுகள் அடங்கும்.
• சாத்தியமான ஆபத்துகள்: அதன் ஆக்ரோஷமான தன்மை காரணமாக, கன்டெய்ன் செய்யப்பட்ட உறுப்பு வளர வேண்டும், அதன் சுற்றுப்புறங்களைப் பாதிக்க வேண்டும் அல்லது அதன் உள்ளடக்கம் வழிந்து சென்றால் பக்கத்தை பார்வைக்கு உடைக்கும் அதிக சாத்தியக்கூறு strict க்கு உள்ளது. அதன் தேவைகள் பூர்த்தி செய்யப்படாவிட்டால் இது உள்ளடக்க கிளிப்பிங் அல்லது தவறான அளவிற்கு வழிவகுக்கும். இது உறுப்பின் நடத்தையைப் பற்றிய முழுமையான புரிதலைக் கோருகிறது.

contain: content;

இது சற்று குறைவான ஆக்ரோஷமான ஷார்ட்ஹேண்ட் ஆகும், இது contain: layout paint style; க்கு சமம். குறிப்பிடத்தக்க வகையில், இது size கன்டெய்ன்மென்ட்டைத் தவிர்க்கிறது. இதன் பொருள் உறுப்பின் அளவு அதன் உள்ளடக்கத்தால் பாதிக்கப்படலாம், ஆனால் அதன் லேஅவுட், பெயிண்ட் மற்றும் ஸ்டைல் கணக்கீடுகள் கன்டெய்ன் செய்யப்பட்டுள்ளன.

• நன்மைகள்: செயல்திறன் மேம்படுத்தல் மற்றும் நெகிழ்வுத்தன்மைக்கு இடையே ஒரு நல்ல சமநிலையை வழங்குகிறது. உள் உள்ளடக்கம் அளவில் மாறுபடக்கூடிய உறுப்புகளுக்கு இது பொருத்தமானது, ஆனால் நீங்கள் இன்னும் அதன் லேஅவுட், பெயிண்ட் மற்றும் ஸ்டைல் விளைவுகளை ஆவணத்தின் மற்ற பகுதிகளிலிருந்து தனிமைப்படுத்த விரும்புகிறீர்கள்.
• எப்போது பயன்படுத்த வேண்டும்: உரைத் தொகுதிகள், கட்டுரைத் துணுக்குகள் அல்லது பயனர் உருவாக்கிய உள்ளடக்கத் தொகுதிகளுக்கு சிறந்தது, அங்கு உள்ளடக்கம் காரணமாக உயரம் ஏற்ற இறக்கமாக இருக்கலாம், ஆனால் நீங்கள் மற்ற ரெண்டரிங் செலவுகளைக் கட்டுப்படுத்த விரும்புகிறீர்கள். உதாரணமாக, ஒரு கட்டத்தில் உள்ள ஒரு வலைப்பதிவு இடுகை முன்னோட்ட அட்டை, அங்கு உரை நீளம் மாறுபடும், ஆனால் அதன் லேஅவுட் மற்றும் பெயிண்டிங் மற்ற அட்டைகளின் ரெண்டரிங்கைப் பாதிக்காது.
• சாத்தியமான ஆபத்துகள்: strict ஐ விட மன்னிக்கக்கூடியதாக இருந்தாலும், உறுப்பின் உள்ளடக்கம் இன்னும் அதன் அளவைப் பாதிக்கக்கூடும் என்பதை நினைவில் கொள்ளுங்கள், இது அதன் பெற்றோர் கவனமாக நிர்வகிக்கப்படாவிட்டால் வெளிப்புற லேஅவுட் கணக்கீடுகளைத் தூண்டக்கூடும்.

இணைந்த கன்டெய்ன்மென்ட் உத்திகள்: சினெர்ஜியின் சக்தி

CSS கன்டெய்ன்மென்ட்டின் உண்மையான சக்தி, குறிப்பிட்ட செயல்திறன் தடைகளை நிவர்த்தி செய்ய வெவ்வேறு வகைகளை நீங்கள் உத்தி ரீதியாக இணைக்கும்போது வெளிப்படுகிறது. உங்கள் பயன்பாட்டின் பதிலளிப்பு மற்றும் செயல்திறனை கணிசமாக மேம்படுத்தக்கூடிய பல பொதுவான மற்றும் பயனுள்ள பல-வகை உத்திகளை ஆராய்வோம்.

உத்தி 1: விர்ச்சுவல் பட்டியல்கள் மற்றும் முடிவற்ற ஸ்க்ரோலிங் (contain: layout size paint;)

இணையத்தில் மிகவும் பொதுவான செயல்திறன் சவால்களில் ஒன்று, சமூக ஊடக ஊட்டங்கள், தரவு அட்டவணைகள் அல்லது தயாரிப்பு பட்டியல்கள் போன்ற உருப்படிகளின் நீண்ட பட்டியல்களைக் காண்பிப்பதை உள்ளடக்கியது. ஆயிரக்கணக்கான DOM முனைகளை ரெண்டரிங் செய்வது செயல்திறனை நிறுத்திவிடும். விர்ச்சுவல்மயமாக்கல் நுட்பங்கள், அங்கு தெரியும் உருப்படிகள் மட்டுமே ரெண்டர் செய்யப்படுகின்றன, இது ஒரு பிரபலமான தீர்வாகும். CSS கன்டெய்ன்மென்ட் இதை மேலும் வலுவூட்டுகிறது.

• பிரச்சனை: கன்டெய்ன்மென்ட் இல்லாமல், உருப்படிகளைச் சேர்ப்பது/நீக்குவது அல்லது ஒரு உருப்படிக்குள் மாறும் மாற்றங்கள் முழுப் பட்டியல் மற்றும் அதன் சுற்றுப்புறங்களுக்கு பெரிய மறு-லேஅவுட்கள் மற்றும் மறு-பெயிண்ட்களை ஏற்படுத்தக்கூடும்.
• தீர்வு: ஒவ்வொரு தனிப்பட்ட பட்டியல் உருப்படிக்கும் contain: layout size paint; ஐப் பயன்படுத்தவும். உருப்படிகளுக்கு நிலையான, அறியப்பட்ட அளவுகள் இருந்தால் நீங்கள் contain: strict; ஐப் பயன்படுத்தலாம்.
• இது ஏன் வேலை செய்கிறது:
  • contain: layout;: உள் மாற்றங்கள் (எ.கா., ஒரு பயனரின் நிலையை புதுப்பித்தல், ஒரு உருப்படிக்குள் ஒரு படத்தை ஏற்றுதல்) மற்ற பட்டியல் உருப்படிகள் அல்லது பெற்றோர் கொள்கலனுக்கான லேஅவுட் மறு கணக்கீடுகளைத் தூண்டாது என்பதை உறுதி செய்கிறது.
  • contain: size;: ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு நிலையான, கணிக்கக்கூடிய அளவு உள்ளது என்று உலாவிக்கு முக்கியமாகத் தெரிவிக்கிறது. இது உலாவிக்கு உருப்படியின் உள்ளடக்கத்தை ஆய்வு செய்யத் தேவையில்லாமல் ஸ்க்ரோல் நிலைகள் மற்றும் உருப்படி தெரிவுநிலையைத் துல்லியமாக தீர்மானிக்க அனுமதிக்கிறது. இது விர்ச்சுவல்மயமாக்கல் தர்க்கம் திறமையாக வேலை செய்வதற்கு அடிப்படையானது.
  • contain: paint;: பார்வைக்கு வெளியே ஸ்க்ரோல் செய்யப்பட்ட உருப்படிகளை பெயிண்ட் செய்வதை முற்றிலுமாகத் தவிர்க்க உலாவியை செயல்படுத்துகிறது, இது பெயிண்ட் பணிச்சுமையை வியத்தகு முறையில் குறைக்கிறது.
• நடைமுறை எடுத்துக்காட்டு: நூற்றுக்கணக்கான நிறுவன விவரங்களைக் காட்டும் ஒரு பங்குச் சந்தை டிக்கரை கற்பனை செய்து பாருங்கள். ஒவ்வொரு வரிசையும் (ஒரு நிறுவனத்தைக் குறிக்கிறது) தொடர்ந்து புதுப்பிக்கப்படும் தரவைக் கொண்டுள்ளது, ஆனால் ஒவ்வொரு வரிசையின் உயரமும் நிலையானது. ஒவ்வொரு வரிசைக்கும் contain: layout size paint; ஐப் பயன்படுத்துவது, தனிப்பட்ட தரவு புதுப்பிப்புகள் உலகளாவிய மறு-ஓட்டங்களை ஏற்படுத்தாது என்பதையும், திரை-க்கு வெளியே உள்ள வரிசைகள் பெயிண்ட் செய்யப்படவில்லை என்பதையும் உறுதி செய்கிறது.
• செயல்படக்கூடிய நுண்ணறிவு: விர்ச்சுவல் பட்டியல்களை உருவாக்கும்போது, எப்போதும் உங்கள் பட்டியல் உருப்படிகளுக்கு கணிக்கக்கூடிய பரிமாணங்களைக் கொடுக்க முயற்சி செய்யுங்கள் மற்றும் இந்த இணைந்த கன்டெய்ன்மென்ட்டைப் பயன்படுத்துங்கள். இந்த உத்தி குறிப்பாக பெரிய தரவுத்தொகுப்புகளைக் கையாளும் உலகளாவிய பயன்பாடுகளுக்கு சக்தி வாய்ந்தது, ஏனெனில் இது வரையறுக்கப்பட்ட வளங்களைக் கொண்ட சாதனங்களில் செயல்திறனை கணிசமாக மேம்படுத்துகிறது.

உத்தி 2: சுயாதீன விட்ஜெட்டுகள் மற்றும் தொகுதிகள் (contain: strict; அல்லது contain: layout paint size;)

நவீன வலைப் பயன்பாடுகள் பெரும்பாலும் அரட்டை சாளரங்கள், அறிவிப்பு பேனல்கள், விளம்பர அலகுகள் அல்லது நேரடி தரவு ஊட்டங்கள் போன்ற பல சுயாதீனமான கூறுகள் அல்லது விட்ஜெட்களால் ஆனவை. இந்தக் கூறுகள் அடிக்கடி புதுப்பிக்கப்படலாம் மற்றும் சிக்கலான உள் கட்டமைப்புகளைக் கொண்டிருக்கலாம்.

• பிரச்சனை: ஒரு விட்ஜெட்டிற்குள் மாறும் புதுப்பிப்புகள் பக்கத்தின் தொடர்பில்லாத பகுதிகளில் ரெண்டரிங் வேலையைத் தற்செயலாகத் தூண்டக்கூடும்.
• தீர்வு: அத்தகைய சுயாதீனமான விட்ஜெட்டுகளின் உறை உறுப்புக்கு contain: strict; ஐப் பயன்படுத்தவும். அவற்றின் அளவு கண்டிப்பாக நிலையானதாக இல்லாவிட்டாலும் இன்னும் பெரும்பாலும் கன்டெய்ன் செய்யப்பட்டிருந்தால், contain: layout paint size; (அல்லது வெறும் layout paint;) ஒரு பாதுகாப்பான மாற்றாக இருக்கலாம்.
• இது ஏன் வேலை செய்கிறது:
  • contain: strict; (அல்லது வெளிப்படையான கலவை) மிக உயர்ந்த அளவிலான தனிமைப்படுத்தலை வழங்குகிறது. உலாவி விட்ஜெட்டை ஒரு கருப்புப் பெட்டியாகக் கருதுகிறது, அதன் எல்லைகளுக்குள் அனைத்து ரெண்டரிங் நிலைகளையும் மேம்படுத்துகிறது.
  • எந்த உள் மாற்றங்களும் (லேஅவுட், பெயிண்ட், ஸ்டைல், அளவு) விட்ஜெட்டிலிருந்து தப்பிக்காது என்று உத்தரவாதம் அளிக்கப்படுகிறது, இது பக்கத்தின் மற்ற பகுதிகளுக்கு செயல்திறன் பின்னடைவுகளைத் தடுக்கிறது.
• நடைமுறை எடுத்துக்காட்டு: பல சுயாதீன தரவுக் காட்சிப்படுத்தல் விட்ஜெட்டுகளைக் கொண்ட ஒரு டாஷ்போர்டு பயன்பாடு. ஒவ்வொரு விட்ஜெட்டும் நிகழ்நேரத் தரவைக் காட்டுகிறது மற்றும் அடிக்கடி புதுப்பிக்கப்படுகிறது. ஒவ்வொரு விட்ஜெட்டின் கொள்கலனுக்கும் contain: strict; ஐப் பயன்படுத்துவது, ஒரு விளக்கப்படத்தில் ஏற்படும் விரைவான புதுப்பிப்புகள் முழு டாஷ்போர்டு லேஅவுட்டையும் அல்லது மற்ற விளக்கப்படங்களையும் மறு-ரெண்டர் செய்ய உலாவியை கட்டாயப்படுத்தாது என்பதை உறுதி செய்கிறது.
• செயல்படக்கூடிய நுண்ணறிவு: உங்கள் பயன்பாட்டில் உண்மையாகவே தனிமைப்படுத்தப்பட்ட கூறுகளை அடையாளம் காணவும். அவற்றின் உடன்பிறப்புகள் அல்லது முன்னோர்களின் லேஅவுட்டுடன் தொடர்பு கொள்ளவோ அல்லது செல்வாக்கு செலுத்தவோ தேவையில்லாத கூறுகள் strict அல்லது ஒரு விரிவான பல-வகை கன்டெய்ன்மென்ட்டிற்கான முதன்மை வேட்பாளர்கள்.

உத்தி 3: திரை-க்கு வெளியே அல்லது மறைக்கப்பட்ட உள்ளடக்கம் (contain: paint layout;)

பல வலை இடைமுகங்கள் DOM-ன் பகுதியாக இருக்கும் ஆனால் தற்போது பயனருக்குத் தெரியாத உறுப்புகளைக் கொண்டுள்ளன. எடுத்துக்காட்டுகளில் ஒரு டேப் செய்யப்பட்ட இடைமுகத்தில் செயலற்ற டேப்கள், ஒரு கொணர்வியில் உள்ள ஸ்லைடுகள் அல்லது தூண்டப்படும் வரை மறைக்கப்பட்டிருக்கும் மோடல்கள் அடங்கும்.

• பிரச்சனை: display: none; வழியாக மறைக்கப்பட்டிருந்தாலும், அதன் டிஸ்ப்ளே பண்பு மாற்றப்பட்டால் உள்ளடக்கம் இன்னும் லேஅவுட் கணக்கீடுகளுக்கு பங்களிக்கக்கூடும். visibility: hidden; அல்லது திரை-க்கு வெளியே நிலைப்படுத்தல் வழியாக மறைக்கப்பட்ட உள்ளடக்கத்திற்கு, அது இன்னும் இடத்தை ஆக்கிரமித்துள்ளது மற்றும் உலாவி மூலம் சரியாக நீக்கப்படாவிட்டால் பெயிண்ட் செலவுகளுக்கு பங்களிக்கக்கூடும்.
• தீர்வு: செயலற்ற டேப்கள், திரை-க்கு வெளியே உள்ள கொணர்வி ஸ்லைடுகள் அல்லது DOM-ல் இருக்கும் ஆனால் தற்போது தெரியாத பிற உறுப்புகளுக்கு contain: paint layout; ஐப் பயன்படுத்தவும்.
• இது ஏன் வேலை செய்கிறது:
  • contain: paint;: இந்த உறுப்பு திரை-க்கு வெளியே அல்லது முற்றிலும் மறைக்கப்பட்டிருந்தால் அதற்குள் எதையும் பெயிண்ட் செய்யக்கூடாது என்று உலாவிக்குத் தெரியும். இது DOM-ன் பகுதியாக இருக்கும் ஆனால் உடனடியாகத் தெரியாத உறுப்புகளுக்கு ஒரு முக்கியமான மேம்படுத்தல் ஆகும்.
  • contain: layout;: மறைக்கப்பட்ட உறுப்புக்குள் ஏதேனும் உள் லேஅவுட் மாற்றங்கள் இருந்தால் (எ.கா., உள்ளடக்கம் ஒத்திசைவின்றி ஏற்றப்படுகிறது), அவை பக்கத்தின் தெரியும் பகுதிகளின் மறு-லேஅவுட்டைத் தூண்டாது என்பதை உறுதி செய்கிறது.
• நடைமுறை எடுத்துக்காட்டு: ஒரு பல-படிவப் படிவம், அங்கு ஒவ்வொரு படியும் ஒரு தனிப்பட்ட கூறு, மற்றும் ஒரு நேரத்தில் ஒன்று மட்டுமே தெரியும். செயலற்ற படிவக் கூறுகளுக்கு contain: paint layout; ஐப் பயன்படுத்துவது, இந்த மறைக்கப்பட்ட படிகளை பெயிண்ட் செய்வதற்கோ அல்லது லேஅவுட் செய்வதற்கோ உலாவி வளங்களை வீணாக்காது என்பதை உறுதி செய்கிறது, பயனர் படிவத்தின் மூலம் செல்லும்போது உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது.
• செயல்படக்கூடிய நுண்ணறிவு: அடிக்கடி தெரியும்/மறைக்கப்பட்ட அல்லது திரை-க்கு வெளியே நகர்த்தப்படும் உறுப்புகளுக்கு உங்கள் பயன்பாட்டை மதிப்பாய்வு செய்யவும். தேவையற்ற ரெண்டரிங் வேலையைக் குறைக்க இவை contain: paint layout; க்கான முதன்மை வேட்பாளர்கள்.

உத்தி 4: மாறுபடும் உரை, நிலையான பெட்டி கொண்ட உள்ளடக்கம் (contain: content;)

சில நேரங்களில், உங்களிடம் கூறுகள் உள்ளன, அங்கு உள் உள்ளடக்கம் (குறிப்பாக உரை) மாறுபடலாம், இதனால் கூறுகளின் ஒட்டுமொத்த உயரத்தைப் பாதிக்கலாம், ஆனால் நீங்கள் இன்னும் மற்ற ரெண்டரிங் அம்சங்களைத் தனிமைப்படுத்த விரும்புகிறீர்கள்.

• பிரச்சனை: உள்ளடக்கம் மாறி உயரத்தைப் பாதித்தால், அது பெற்றோர் அல்லது உடன்பிறப்பு உறுப்புகளுக்கு லேஅவுட் கணக்கீடுகளைத் தூண்டக்கூடும். இருப்பினும், பெயிண்ட் மற்றும் ஸ்டைல் மறு கணக்கீடுகள் போன்ற பிற அதிக செலவுமிக்க செயல்பாடுகள் வெளிப்புறத்தைப் பாதிப்பதைத் தடுக்க நீங்கள் விரும்பலாம்.
• தீர்வு: contain: content; ஐப் பயன்படுத்தவும் (இது layout paint style; க்கான ஷார்ட்ஹேண்ட் ஆகும்). இது உறுப்பின் அளவு அதன் உள்ளடக்கத்தால் தீர்மானிக்கப்பட அனுமதிக்கிறது, அதே நேரத்தில் லேஅவுட், பெயிண்ட் மற்றும் ஸ்டைல் விளைவுகளைக் கட்டுப்படுத்துகிறது.
• இது ஏன் வேலை செய்கிறது:
  • contain: layout;: உள் லேஅவுட் மாற்றங்கள் (எ.கா., உரை வித்தியாசமாக மடிக்கப்படுதல்) வெளிப்புற லேஅவுட் மாற்றங்களைத் தூண்டாது.
  • contain: paint;: பெயிண்டிங் கட்டுப்படுத்தப்படுகிறது, இது பெயிண்ட் நோக்கத்தைக் குறைக்கிறது.
  • contain: style;: உள்ளே உள்ள ஸ்டைல் மாற்றங்கள் உள்ளூர் அளவில் இருக்கும்.
  • size கன்டெய்ன்மென்ட் இல்லாதது, உறுப்பின் உயரம் அதன் உள்ளடக்கத்தின் அடிப்படையில் மாறும் வகையில் சரிசெய்ய அனுமதிக்கிறது, நீங்கள் அதன் பரிமாணங்களை வெளிப்படையாக வரையறுக்கத் தேவையில்லை.
• நடைமுறை எடுத்துக்காட்டு: ஒரு செய்தி ஊட்டம், அங்கு ஒவ்வொரு கட்டுரைத் துணுக்கும் ஒரு தலைப்பு, படம் மற்றும் மாறுபடும் அளவிலான சுருக்க உரையைக் கொண்டுள்ளது. துணுக்கு அட்டையின் ஒட்டுமொத்த அகலம் நிலையானது, ஆனால் அதன் உயரம் உரைக்கு ஏற்றவாறு சரிசெய்கிறது. ஒவ்வொரு துணுக்கு அட்டைக்கும் contain: content; ஐப் பயன்படுத்துவது, அதன் உயரம் சரிசெய்யப்பட்டாலும், அது முழு செய்தி ஊட்டம் கட்டத்தின் மறு-ஓட்டத்தை ஏற்படுத்தாது என்பதையும், அதன் பெயிண்டிங் மற்றும் ஸ்டைலிங் உள்ளூர்மயமாக்கப்பட்டுள்ளது என்பதையும் உறுதி செய்கிறது.
• செயல்படக்கூடிய நுண்ணறிவு: அவற்றின் உயரத்தைப் பாதிக்கக்கூடிய மாறும் உரை உள்ளடக்கத்துடன் கூடிய கூறுகளுக்கு, ஆனால் மற்ற ரெண்டரிங் கவலைகள் தனிமைப்படுத்தப்பட வேண்டும், contain: content; ஒரு சிறந்த சமநிலையை வழங்குகிறது.

உத்தி 5: ஸ்க்ரோல் செய்யப்பட்ட பகுதிகளுக்குள் ஊடாடும் கூறுகள் (contain: layout paint;)

ஒரு ரிச் டெக்ஸ்ட் எடிட்டர் அல்லது ஒரு அரட்டை வரலாறு போன்ற ஒரு சிக்கலான ஸ்க்ரோல் செய்யக்கூடிய பகுதியைக் கவனியுங்கள், இது டிராப்டவுன்கள், டூல்டிப்கள் அல்லது உட்பொதிக்கப்பட்ட மீடியா பிளேயர்கள் போன்ற ஊடாடும் கூறுகளைக் கொண்டிருக்கலாம்.

• பிரச்சனை: இந்தக் கூறுகளுக்குள் உள்ள தொடர்புகள் லேஅவுட் அல்லது பெயிண்ட் செயல்பாடுகளைத் தூண்டக்கூடும், இது ஸ்க்ரோல் செய்யக்கூடிய கொள்கலன் வரை மற்றும் அதற்கு அப்பாலும் பரவி, ஸ்க்ரோலிங் செயல்திறனைப் பாதிக்கலாம்.
• தீர்வு: ஸ்க்ரோல் செய்யக்கூடிய கொள்கலனுக்கே contain: layout paint; ஐப் பயன்படுத்தவும். இது ரெண்டரிங் கவலைகளை இந்த குறிப்பிட்ட பகுதிக்கு வரம்பிட உலாவிக்குச் சொல்கிறது.
• இது ஏன் வேலை செய்கிறது:
  • contain: layout;: ஸ்க்ரோல் செய்யக்கூடிய பகுதிக்குள் எந்த லேஅவுட் மாற்றங்களும் (எ.கா., ஒரு டிராப்டவுனைத் திறப்பது, ஒரு உட்பொதிக்கப்பட்ட வீடியோவை மறுஅளவிடுவது) அதற்குள் கட்டுப்படுத்தப்படுகின்றன, இது செலவுமிக்க முழு-பக்க மறு-ஓட்டங்களைத் தடுக்கிறது.
  • contain: paint;: தொடர்புகளால் தூண்டப்படும் பெயிண்ட் செயல்பாடுகள் (எ.கா., ஒரு உறுப்பின் மீது ஹோவர் செய்வது, ஒரு டூல்டிப்பைக் காண்பிப்பது) உள்ளூர்மயமாக்கப்பட்டுள்ளன என்பதை உறுதி செய்கிறது, இது மென்மையான ஸ்க்ரோலிங்கிற்கு பங்களிக்கிறது.
• நடைமுறை எடுத்துக்காட்டு: பயனர்கள் தனிப்பயன் ஊடாடும் கூறுகளை உட்பொதிக்க அனுமதிக்கும் ஒரு ஆன்லைன் ஆவண எடிட்டர். முக்கிய திருத்தக்கூடிய கேன்வாஸுக்கு contain: layout paint; ஐப் பயன்படுத்துவது, ஒரு உட்பொதிக்கப்பட்ட கூறுக்குள் சிக்கலான தொடர்புகள் அல்லது மாறும் உள்ளடக்கம் எடிட்டரின் அல்லது அதன் சுற்றியுள்ள UI-ன் ஒட்டுமொத்த பதிலளிப்பை எதிர்மறையாகப் பாதிக்காது என்பதை உறுதி செய்கிறது.
• செயல்படக்கூடிய நுண்ணறிவு: சிக்கலான, ஊடாடும் மற்றும் ஸ்க்ரோல் செய்யக்கூடிய பகுதிகளுக்கு, layout மற்றும் paint கன்டெய்ன்மென்ட்டை இணைப்பது தொடர்பு மற்றும் ஸ்க்ரோலிங் செயல்திறனை கணிசமாக மேம்படுத்த முடியும்.

உலகளாவிய வரிசைப்படுத்தலுக்கான சிறந்த நடைமுறைகள் மற்றும் முக்கியமான பரிசீலனைகள்

CSS கன்டெய்ன்மென்ட் மகத்தான செயல்திறன் நன்மைகளை வழங்கினாலும், இது ஒரு மந்திரக்கோல் அல்ல. குறிப்பாக மாறுபட்ட சாதனத் திறன்கள் மற்றும் நெட்வொர்க் நிலைமைகளைக் கொண்ட உலகளாவிய பயனர் தளத்திற்கு பயன்பாடுகளை வரிசைப்படுத்தும்போது, எதிர்பாராத பக்க விளைவுகளைத் தவிர்க்க சிந்தனைமிக்க பயன்பாடு மற்றும் சிறந்த நடைமுறைகளைக் கடைப்பிடிப்பது அவசியம்.

1. யூகிக்க வேண்டாம், அளவிடுங்கள் (உலகளாவிய செயல்திறன் கண்காணிப்பு)

எந்தவொரு செயல்திறன் மேம்படுத்தலையும் பயன்படுத்துவதற்கு முன் மிக முக்கியமான படி உங்கள் தற்போதைய செயல்திறனை அளவிடுவது. தடைகளை அடையாளம் காண உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும் (Chrome DevTools' Performance tab, Lighthouse audits, அல்லது WebPageTest போன்றவை). நீண்ட லேஅவுட் மற்றும் பெயிண்ட் நேரங்களைத் தேடுங்கள். இந்த செலவுகள் உண்மையாகவே அதிகமாக இருக்கும் இடத்தில் கன்டெய்ன்மென்ட் பயன்படுத்தப்பட வேண்டும். யூகிப்பது தேவையற்ற இடத்தில் கன்டெய்ன்மென்ட்டைப் பயன்படுத்த வழிவகுக்கும், இது அதிக செயல்திறன் ஆதாயம் இல்லாமல் நுட்பமான பிழைகளை அறிமுகப்படுத்தக்கூடும். Largest Contentful Paint (LCP), First Input Delay (FID), மற்றும் Cumulative Layout Shift (CLS) போன்ற செயல்திறன் அளவீடுகள் உலகளவில் முக்கியமானவை, மற்றும் கன்டெய்ன்மென்ட் அவை அனைத்தையும் சாதகமாகப் பாதிக்கக்கூடும்.

2. தாக்கங்களைப் புரிந்து கொள்ளுங்கள் (வர்த்தகப் பரிமாற்றங்கள்)

ஒவ்வொரு கன்டெய்ன்மென்ட் வகையும் வர்த்தகப் பரிமாற்றங்களுடன் வருகிறது. contain: size; பரிமாணங்களைப் பற்றி நீங்கள் வெளிப்படையாக இருக்க வேண்டும், இது உண்மையிலேயே திரவ லேஅவுட்டுகளுக்கு எப்போதும் சாத்தியமாகவோ அல்லது விரும்பத்தக்கதாகவோ இருக்காது. வடிவமைப்பு நோக்கங்களுக்காக உள்ளடக்கம் வழிந்து செல்ல வேண்டுமானால், contain: paint; அதை கிளிப் செய்யும். இந்த தாக்கங்களைப் பற்றி எப்போதும் அறிந்திருங்கள் மற்றும் வெவ்வேறு வியூபோர்ட்டுகள் மற்றும் உள்ளடக்க மாறுபாடுகளில் முழுமையாக சோதிக்கவும். ஒரு பிராந்தியத்தில் உயர்-தெளிவுத்திறன் மானிட்டரில் வேலை செய்யும் ஒரு தீர்வு, மற்றொரு பிராந்தியத்தில் ஒரு சிறிய மொபைல் சாதனத்தில் பார்வைக்கு தோல்வியடையக்கூடும்.

3. சிறியதாகத் தொடங்கி, மீண்டும் செய்யவும்

உங்கள் பக்கத்தில் உள்ள ஒவ்வொரு உறுப்புக்கும் contain: strict; ஐப் பயன்படுத்த வேண்டாம். அறியப்பட்ட சிக்கலான பகுதிகளுடன் தொடங்குங்கள்: பெரிய பட்டியல்கள், சிக்கலான விட்ஜெட்டுகள் அல்லது அடிக்கடி புதுப்பிக்கும் கூறுகள். முதலில் மிகவும் குறிப்பிட்ட கன்டெய்ன்மென்ட் வகையைப் பயன்படுத்துங்கள் (எ.கா., வெறும் layout அல்லது paint), பின்னர் தேவைக்கேற்ப இணைத்து, ஒவ்வொரு படியிலும் தாக்கத்தை அளவிடவும். இந்த மீண்டும் மீண்டும் செய்யும் அணுகுமுறை மிகவும் பயனுள்ள உத்திகளைக் கண்டறிய உதவுகிறது மற்றும் அதிகப்படியான மேம்படுத்தலைத் தவிர்க்கிறது.

4. அணுகல்தன்மை பரிசீலனைகள்

கன்டெய்ன்மென்ட் அணுகல்தன்மை அம்சங்களுடன் எவ்வாறு தொடர்பு கொள்ளலாம் என்பதில் கவனமாக இருங்கள். உதாரணமாக, நீங்கள் பார்வைக்கு திரை-க்கு வெளியே உள்ள ஆனால் இன்னும் ஸ்கிரீன் ரீடர்களுக்கு அணுகக்கூடியதாக இருக்க வேண்டிய ஒரு உறுப்பில் contain: paint; ஐப் பயன்படுத்தினால், அதன் உள்ளடக்கம் அணுகல்தன்மை மரத்தில் கிடைப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். பொதுவாக, கன்டெய்ன்மென்ட் பண்புகள் முதன்மையாக ரெண்டரிங் செயல்திறனைப் பாதிக்கின்றன மற்றும் செமண்டிக் HTML அல்லது ARIA பண்புகளுடன் நேரடியாகத் தலையிடாது, ஆனால் அணுகல்தன்மை தணிக்கைகளைச் செய்வது எப்போதும் புத்திசாலித்தனம்.

5. உலாவி ஆதரவு மற்றும் முற்போக்கான மேம்படுத்தல்

contain நவீன உலாவிகளில் நல்ல ஆதரவைக் கொண்டிருந்தாலும் (caniuse.com ஐ சரிபார்க்கவும்), அதன் பயன்பாட்டை ஒரு முற்போக்கான மேம்பாடாகக் கருதுங்கள். உங்கள் முக்கிய செயல்பாடு சரியான ரெண்டரிங்கிற்கு கன்டெய்ன்மென்ட்டை மட்டுமே நம்பியிருக்கக்கூடாது. ஒரு உலாவி contain ஐ ஆதரிக்கவில்லை என்றால், பக்கம் இன்னும் சரியாக செயல்பட வேண்டும், இருப்பினும் செயல்திறன் குறைவாக இருக்கலாம். இந்த அணுகுமுறை பயனர்களுக்கு உலகளவில், அவர்களின் உலாவி பதிப்புகளைப் பொருட்படுத்தாமல் ஒரு வலுவான அனுபவத்தை உறுதி செய்கிறது.

6. கன்டெய்ன்மென்ட் சிக்கல்களை சரிசெய்தல்

contain ஐப் பயன்படுத்திய பிறகு கிளிப் செய்யப்பட்ட உள்ளடக்கம் அல்லது தவறான லேஅவுட்கள் போன்ற எதிர்பாராத சிக்கல்களை நீங்கள் சந்தித்தால், சரிசெய்வது எப்படி என்பது இங்கே:

• உறுப்புகளை ஆய்வு செய்யுங்கள்: கன்டெய்ன் செய்யப்பட்ட உறுப்பு மற்றும் அதன் பெற்றோர் கணக்கிடப்பட்ட ஸ்டைல்களைச் சரிபார்க்க உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
• பண்புகளை மாற்றிப் பாருங்கள்: எந்த குறிப்பிட்ட பண்பு சிக்கலை ஏற்படுத்துகிறது என்பதைக் காண contain மதிப்புகளை (எ.கா., size அல்லது paint ஐ நீக்குதல்) தற்காலிகமாக ஒவ்வொன்றாக முடக்கவும்.
• வழிதல்களைச் சரிபார்க்கவும்: அவற்றின் கொள்கலன்களுக்கு வெளியே பார்வைக்கு வழிந்து செல்லும் உறுப்புகளைத் தேடுங்கள்.
• பரிமாணங்களை மதிப்பாய்வு செய்யவும்: contain: size; (அல்லது strict) உடன் உள்ள உறுப்புகள் வெளிப்படையான அல்லது உள்ளார்ந்த வரையறுக்கப்பட்ட பரிமாணங்களைக் கொண்டிருப்பதை உறுதிப்படுத்தவும்.
• செயல்திறன் மானிட்டர்: உங்கள் மாற்றங்கள் உண்மையில் லேஅவுட் மற்றும் பெயிண்ட் நேரங்களில் விரும்பிய விளைவைக் கொண்டிருக்கின்றனவா என்பதைக் காண செயல்திறன் மானிட்டரைத் திறந்து வைக்கவும்.

நிஜ உலகத் தாக்கம் மற்றும் உலகளாவிய பொருத்தம்

CSS கன்டெய்ன்மென்ட்டின் உத்திசார்ந்த பயன்பாடு மில்லி விநாடிகளைக் குறைப்பது மட்டுமல்ல; இது உலகெங்கிலும் ஒரு உயர்ந்த, சமமான பயனர் அனுபவத்தை வழங்குவது பற்றியது. அதிவேக இணையம் அல்லது சக்திவாய்ந்த கணினி சாதனங்களுக்கான குறைந்த அணுகல் உள்ள பிராந்தியங்களில், CSS கன்டெய்ன்மென்ட் போன்ற செயல்திறன் மேம்படுத்தல்கள் ஒரு பயன்படுத்தக்கூடிய வலைப் பயன்பாட்டிற்கும் மற்றும் திறம்பட அணுக முடியாத ஒன்றிற்கும் இடையேயான வித்தியாசமாக இருக்கலாம். CPU மற்றும் GPU பணிச்சுமையைக் குறைப்பதன் மூலம், நீங்கள் மொபைல் பயனர்களுக்கான பேட்டரி ஆயுளை மேம்படுத்துகிறீர்கள், உங்கள் தளத்தை பழைய வன்பொருளில் அதிக பதிலளிக்கக்கூடியதாக மாற்றுகிறீர்கள், மேலும் ஏற்ற இறக்கமான நெட்வொர்க் நிலைமைகளிலும் ஒரு மென்மையான அனுபவத்தை வழங்குகிறீர்கள். இது நேரடியாக சிறந்த பயனர் ஈடுபாடு, குறைந்த பவுன்ஸ் விகிதங்கள் மற்றும் உங்கள் பயன்பாடுகள் மற்றும் சேவைகளுக்கான பரந்த பார்வையாளர் அணுகலுக்கு மொழிபெயர்க்கிறது.

மேலும், சுற்றுச்சூழல் கண்ணோட்டத்தில், அதிக திறமையான ரெண்டரிங் குறைவான கணக்கீட்டு சக்தி நுகர்வுக்கு மொழிபெயர்க்கிறது, இது ஒரு பசுமையான வலைக்கு பங்களிக்கிறது. இந்த உலகளாவிய பொறுப்பு தொழில்நுட்பத் துறையில் பெருகிய முறையில் அங்கீகரிக்கப்பட்டுள்ளது, மேலும் திறமையான CSS அந்தத் தீர்வின் ஒரு பகுதியாகும்.

முடிவு: கட்டுப்படுத்தப்பட்ட வடிவமைப்பின் சக்தியைத் தழுவுங்கள்

CSS கன்டெய்ன்மென்ட், குறிப்பாக அதன் பல-வகை உத்திகளைப் பயன்படுத்தும்போது, உச்ச செயல்திறனை அடைவதற்கான நவீன வலை டெவலப்பரின் ஆயுதக் களஞ்சியத்தில் ஒரு தவிர்க்க முடியாத கருவியாகும். இது உங்கள் UI-ன் கட்டமைப்பு மற்றும் சுதந்திரத்தை உலாவிக்கு வெளிப்படையாகத் தொடர்புகொள்வதற்கான அதிகாரத்தை உங்களுக்கு வழங்குகிறது, இது சிக்கலான ஜாவாஸ்கிரிப்ட் தீர்வுகள் அல்லது கவனமான, கைமுறை DOM கையாளுதல் மூலம் மட்டுமே சாத்தியமான அறிவார்ந்த ரெண்டரிங் மேம்படுத்தல்களைச் செய்ய அனுமதிக்கிறது.

விர்ச்சுவல் பட்டியல்கள் முதல் சுயாதீன விட்ஜெட்டுகள் மற்றும் திரை-க்கு வெளியே உள்ள உள்ளடக்கம் வரை, layout, paint, size, மற்றும் style கன்டெய்ன்மென்ட்டை உத்தி ரீதியாக இணைக்கும் திறன், அதிக செயல்திறன், பதிலளிக்கக்கூடிய மற்றும் வள-திறனுள்ள வலைப் பயன்பாடுகளை உருவாக்க ஒரு நெகிழ்வான மற்றும் சக்திவாய்ந்த வழியை வழங்குகிறது. வலை தொடர்ந்து உருவாகி, வேகம் மற்றும் மென்மைக்கான பயனர் எதிர்பார்ப்புகள் தீவிரமடையும் போது, CSS கன்டெய்ன்மென்ட்டில் தேர்ச்சி பெறுவது சந்தேகத்திற்கு இடமின்றி உங்கள் திட்டங்களை வேறுபடுத்தும், எல்லா இடங்களிலும் உள்ள பயனர்களுக்கு வேகமான மற்றும் திரவ அனுபவத்தை உறுதி செய்யும்.

இன்றே உங்கள் திட்டங்களில் contain உடன் பரிசோதனை செய்யத் தொடங்குங்கள். உங்கள் தாக்கத்தை அளவிடுங்கள், மீண்டும் செய்யவும், மேலும் உங்கள் உலகளாவிய பார்வையாளர்களுக்கான அதிக செயல்திறன் மிக்க வலை அனுபவத்தின் நன்மைகளை அனுபவிக்கவும். உங்கள் பயனர்கள், மற்றும் அவர்களின் சாதனங்கள், உங்களுக்கு நன்றி தெரிவிக்கும்.